<template>
  <div class="container">
    <rz-dialog
      :dialogVisible="dialogVisible"
      :width="width"
      :title="title"
      @onconfirm="onconfirm"
      @oncancel="oncancel"
    >
      <!-- 1213 -->
      <el-row type="flex">
        <el-col :span="24" style="display: flex">
          <span style="padding: 10px 10px 0 0">查询条件:</span>
          <div style="flex: 1">
            <el-select
              v-model="queryInfo.districtcode"
              placeholder="请选择单位所属区域"
            >
              <el-option
                v-for="item in regionList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="queryInfo.bodyindustry"
              placeholder="请选择单位业态"
              clearable
            >
              <el-option
                v-for="item in bodyindustryList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="queryInfo.peopleType"
              placeholder="请选择人员类别"
              clearable
            >
              <el-option
                v-for="item in dimension"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="queryInfo.codecolor"
              placeholder="请选择信息码"
              clearable
              class="selectwidth"
            >
              <el-option
                v-for="item in Information"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="queryInfo.position"
              placeholder="请选择职位状态"
              clearable
              class="selectwidth"
            >
              <el-option
                v-for="item in Position"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="queryInfo.unittype"
              placeholder="请选择其他类别"
              clearable
              class="selectwidth"
            >
              <el-option
                v-for="item in category"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input
                  maxlength="50"
              v-model="queryInfo.searchValue"
              placeholder="请输入单位名称"
              style="width: 217px"
            ></el-input>
            <el-input
                  maxlength="50"
              v-model="queryInfo.custname"
              placeholder="请输入姓名"
              style="width: 217px"
            ></el-input>
            <el-button
              type="primary"
              icon="el-icon-search"
              v-no-click
              @click="query"
              >查询</el-button
            >
          </div>
        </el-col>
      </el-row>
      <rz-height></rz-height>
      <el-row>
        <el-col :span="24" style="display: flex; justify-content: flex-end">
          <el-dropdown :hide-on-click="false">
          <el-button type="primary">
            <i class="el-icon-s-grid"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown" class="el_dropdown_wapper">
            <el-dropdown-item v-for="(item, index) in list" :key="index">
              <el-checkbox v-model="item.value">{{ item.name }}</el-checkbox>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        </el-col>
      </el-row>
      <rz-height></rz-height>

    
       <el-table :data="tableData" border style="width: 100%" stripe>
      <el-table-column
        prop="tname"
        label="姓名"
        width="80"
        v-if="list[0].value"
      >
      </el-table-column>
            <el-table-column prop="sex" label="性别" width="80"  v-if="list[1].value">
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="80"  v-if="list[2].value">
      </el-table-column>
      
    
      <el-table-column
        prop="national"
        label="民族"
        width="80"
        v-if="list[3].value"
      >
      </el-table-column>
        <el-table-column
        prop="national"
        label="籍贯"
        width="180"
           v-if="list[4].value"
      >
         <template slot-scope="scope">
          <span >{{scope.row.province}}--{{scope.row.city}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="联系电话"
        width="100"
          v-if="list[5].value"
      >
        <template slot-scope="scope">
          {{
            scope.row.mobile.substring(0, 3) +
            "****" +
            scope.row.mobile.substring(7, 11)
          }}
        </template>
      </el-table-column>
 
      <el-table-column
        prop="codecolor"
        label="信息码"
        width="100"
          v-if="list[6].value"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.codecolor == 0">待完善</span>
          <span v-if="scope.row.codecolor == 1" class="green">绿码</span>
          <span v-if="scope.row.codecolor == 2" class="yellow">黄码</span>
          <span v-if="scope.row.codecolor == 3" class="red">红码</span>
        </template>
      </el-table-column>


            <!-- list: [
        {
          name: "姓名",
          value: true,
        },
        {
          name: "性别",
          value: true,
        },
        {
          name: "年龄",
          value: false,
        },
        {
          name: "民族",
          value: false,
        },
        {
          name: "籍贯",
          value: false,
        },
        {
          name: "联系电话",
          value: true,
        },
    
        {
          name: "信息码",
          value: true,
        },
        {
          name: "到期日期",
          value: true,
        },
8
        {
          name: "身份证有效期",
          value: false,
        },
        {
          name: "健康证明有效期至",
          value: false,
        },

        // 9
        {
          name: "考试有效期至",
          value: false,
        },

        {
          name: "工作单位名称",
          value: true,
        },
    12
        {
          name: " 单位业态",
          value: false,
        },

        // 13
        {
          name: "单位所属区域",
          value: false,
        },

        {
          name: "人员类别",
          value: true,
        },
        {
          name: "职位状态",
          value: true,
        },
        // 16
        {
          name: "入职日期",
          value: false,
        },
        17
        {
          name: "身份证状态",
          value: false,
        },
        {
          name: "健康证明状态",
          value: false,
        },
        {
          name: "考试状态",
          value: false,
        },
        {
          name: "从事其他产品",
          value: false,
        },
      ], -->
      <el-table-column
        prop="validuntil"
        label="到期日期"
        width="100"
             v-if="list[7].value"
      >
      </el-table-column>
      <el-table-column
        prop="idvalid"
        label="身份证有效期至"
        width="100"
         v-if="list[8].value"
      >
      </el-table-column>
      <el-table-column
        prop="jkvalid"
        label="健康证明有效期至"
        width="100"
             v-if="list[9].value"
      >
      </el-table-column>
      <el-table-column
        prop="ksvalid"
        label="考试有效期至"
        width="100"
         v-if="list[10].value"
      >
      </el-table-column>
          <el-table-column
        prop="unitname"
        label="工作单位名称"
        width="400"
            v-if="list[11].value"
      >
      </el-table-column>
          <el-table-column
        prop="bodyindustry"
        label="单位业态"
        width="150"
        v-if="list[12].value"
      >
      </el-table-column>
          <el-table-column
        prop="district"
        label="所属区域"
        width="100"
          v-if="list[13].value"
      >
      </el-table-column>
        <el-table-column
        prop="isadmin"
        label="人员类别"
        width="100"
         v-if="list[14].value"
      >
      </el-table-column>
            <!-- 姓名（默认）、性别（默认）、年龄、民族、籍贯、联系电话（默认）、信息码（默认）、到期日期（默认）、
      身份证有效期至、健康证明有效期至、考试有效期至、工作单位名称（默认）、单位业态、
      单位所属区域、人员类别（默认）、职位状态【全职】（默认）、入职日期、
      身份证状态（红，黄，绿，待完善）、健康证明状态（红，黄，绿，待完善）、
      考试状态（红，黄，绿，待完善）、从事其他产品 -->
      <el-table-column
        prop="position"
        label="职位状态"
        width="100"
            v-if="list[15].value"
      >
      </el-table-column>
  <el-table-column
        prop="entrytime"
        label="入职日期"
        width="100"
         v-if="list[16].value"
      >
      </el-table-column>
        <el-table-column
        prop="dabhstate"
        label="身份证状态"
        v-if="list[17].value"
        width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.dabhstate == 0">待完善</span>
   <span v-if="scope.row.dabhstate == 1" class="green">有效期内</span>
          <span v-if="scope.row.dabhstate == 2" class="yellow">即将到期</span>
          <span v-if="scope.row.dabhstate == 3" class="red">已到期</span>
        </template>
      </el-table-column>
           <el-table-column
        prop="jkzstate"
        label=" 健康证明状态"
        v-if="list[18].value"
        width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.jkzstate == 0">待完善</span>
     <span v-if="scope.row.jkzstate == 1" class="green">有效期内</span>
          <span v-if="scope.row.jkzstate == 2" class="yellow">即将到期</span>
          <span v-if="scope.row.jkzstate == 3" class="red">已到期</span>
        </template>
      </el-table-column>
        <el-table-column
        prop="ksstate"
        label="考试状态"
        v-if="list[19].value"
        width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.ksstate == 0">待完善</span>
          <span v-if="scope.row.ksstate == 1" class="green">有效期内</span>
          <span v-if="scope.row.ksstate == 2" class="yellow">即将到期</span>
          <span v-if="scope.row.ksstate == 3" class="red">已到期</span>
        </template>
      </el-table-column>
     
      <el-table-column
        prop="unittype"
        label="从事其它产品"
        width="260"
           v-if="list[20].value"
      >
        <template slot-scope="scope">
          {{ scope.row.unittype.replace(/&/g, ",") }}
        </template>
      </el-table-column>
    </el-table>
      <div class="paginations">
        <el-pagination
          :current-page.sync="queryInfo.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
          @current-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </rz-dialog>
  </div>
</template>
<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "50%",
    },
    isedit: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "添加/编辑",
    },
    type: {
      type: Number,
    },
    districtcode: {
      type: String,
      default: "320500",
    },
  },
  // props:[],
  // 页面加载
  created() {
    switch (this.type) {
      case 0:
        this.queryInfo.bodyindustry = "食品生产经营者";
        break;
      case 1:
        this.queryInfo.bodyindustry = "餐饮服务经营者";
        break;
      case 2:
        this.queryInfo.bodyindustry = "食品流通经营者";
        break;
      case 3:
        this.queryInfo.bodyindustry = "单位食堂";
        break;
      case 4:
        this.queryInfo.peopleType = "1";
        break;
      case 5:
        this.queryInfo.peopleType = "2";
        break;
      case 6:
        this.queryInfo.peopleType = "3";
        break;
      case 10:
        this.queryInfo.codecolor = "1";
        break;
      case 11:
        this.queryInfo.codecolor = "2";
        break;
      case 12:
        this.queryInfo.codecolor = "3";
        break;
      case 13:
        this.queryInfo.codecolor = "4";
        break;
      case 7:
        this.queryInfo.unittype = "特殊食品";
        break;
      case 8:
        this.queryInfo.unittype = "从事食用农产品";
        break;
      case 9:
        this.queryInfo.unittype = "从事冷藏冷冻农产品";
        break;
    }
    this.queryInfo.districtcode = this.districtcode?this.districtcode:"320500";
    this.query();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      isdisabled:false,
      queryInfo: {
        districtcode: "",
        bodyindustry: "",
        isPage: 0,
        page: 1,
        pageSize: 10,
        searchValue: "",
        codecolor: "",
        peopleType: "",
        custname: "",
        position: "",
        unittype: "",
      },
      total: 0,
      regionList: [
        {
          value: "320500",
          label: "苏州市",
        },
        {
          value: "320506",
          label: "吴中区",
        },

        {
          value: "320507",
          label: "相城区",
        },
        {
          value: "320505",
          label: "高新区",
        },
        {
          value: "320508",
          label: "姑苏区",
        },
        {
          value: "320509",
          label: "工业园区",
        },
        {
          value: "320581",
          label: "常熟市",
        },
        {
          value: "320582",
          label: "张家港市",
        },
        {
          value: "320583",
          label: "昆山市",
        },
        {
          value: "320584",
          label: "吴江区",
        },
        {
          value: "320585",
          label: "太仓市",
        },
        {
          value: "320592",
          label: "张家港保税区",
        },
      ],
      bodyindustryList: [
        {
          value: "食品生产经营者",
          label: "食品生产经营者",
        },
        {
          value: "食品流通经营者",
          label: "食品流通经营者",
        },
        {
          value: "餐饮服务经营者",
          label: "餐饮服务经营者",
        },
        {
          value: "单位食堂",
          label: "单位食堂",
        },
      ],
      dimension: [
        {
          value: "1",
          label: "从业人员",
        },
        {
          value: "3",
          label: "食品安全管理员",
        },
        {
          value: "2",
          label: "企业管理员",
        },
      ],

      Information: [
        {
          value: "1",
          label: "绿码",
        },
        {
          value: "2",
          label: "黄码",
        },
        {
          value: "3",
          label: "红码",
        },
        {
          value: "4",
          label: "待完善",
        },
      ],
      Position: [
        {
          value: "1",
          label: "全职",
        },
        {
          value: "2",
          label: "兼职",
        },
        {
          value: "3",
          label: "入职待确认",
        },
      ],
      category: [
        {
          value: "特殊食品",
          label: "特殊食品",
        },
        {
          value: "从事食用农产品",
          label: "从事食用农产品",
        },
        {
          value: "从事冷藏冷冻农产品",
          label: "从事冷藏冷冻农产品",
        },
      ],
      tableData: [],
      
    
       list: [
        {
          name: "姓名",
          value: true,
        },
        {
          name: "性别",
          value: true,
        },
        {
          name: "年龄",
          value: false,
        },
        {
          name: "民族",
          value: false,
        },
        {
          name: "籍贯",
          value: false,
        },
        {
          name: "联系电话",
          value: true,
        },
    
        {
          name: "信息码",
          value: true,
        },
        {
          name: "到期日期",
          value: true,
        },

        {
          name: "身份证有效期",
          value: false,
        },
        {
          name: "健康证明有效期至",
          value: false,
        },

        // 9
        {
          name: "考试有效期至",
          value: false,
        },

        {
          name: "工作单位名称",
          value: true,
        },
    
        {
          name: " 单位业态",
          value: false,
        },

        // 13
        {
          name: "单位所属区域",
          value: false,
        },

        {
          name: "人员类别",
          value: true,
        },
        {
          name: "职位状态",
          value: true,
        },
        // 16
        {
          name: "入职日期",
          value: false,
        },
        {
          name: "身份证状态",
          value: false,
        },
        {
          name: "健康证明状态",
          value: false,
        },
        {
          name: "考试状态",
          value: false,
        },
        {
          name: "从事其他产品",
          value: false,
        },
      ],
    };
  },
  // 方法
  methods: {
    oncancel() {
      this.$emit("oncancel");
    },
    onedit() {
      this.$emit("onedit");
    },
    onconfirm() {
      this.$emit("onconfirm");
    },
    // queryCongyeDetail
    query() {
      let data = this.$_.cloneDeep(this.queryInfo);
      data.bodyindustry = data.bodyindustry ? [data.bodyindustry] : [];
      data.codecolor = data.codecolor ? [data.codecolor] : [];
      console.log(data.districtcode);
      data.districtcode =
        data.districtcode == "320500" ? [] : [data.districtcode];
      data.peopleType = data.peopleType ? [data.peopleType] : [];
      data.position = data.position ? [data.position] : [];
      data.unittype = data.unittype ? [data.unittype] : [];
      this.$http
        .queryCongyeDetail(data)
        .then((res) => {
          if (res.code == 200) {
                 res.data.forEach((x) => {
              for (const key in x) {
                if (!x[key]) {
                  x[key] = "--";
                }
              }
            });
              this.tableData = res.data;
              this.total=res.totalCount
          } else {
            this.$error(res.msg);
          }
        })
        .catch((err) => {
          this.$error();
          console.log(err);
        });
    },
    handleSizeChange(e) {
      this.queryInfo.page = e;
      this.query();
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="less" scoped>
.container {
  /deep/ .el-select {
    margin-bottom: 10px;
    margin-right: 10px;
  }
  .el-input {
    margin-right: 10px;
  }
  .paginations {
    padding: 10px 0;
    text-align: right;
  }
   .red {
    color: red;
  }
  .green {
    color: green;
  }
  .yellow {
    color: #FBAF22;
  }
}
</style>